<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="lib/jquery-3.2.1.js"></script>
</head>
<body >
    <!-- 头部 -->
  <div class="head">
    <div class="head-left">
        <img src="images/语雀logo.png" style="width: 79px;height: 36px;margin-top: 15px;">
        <input type="text" placeholder="搜索" class="head-from">
        <button class="head-button"><img src="images/搜索.png" style="width: 20px;height: 20px;"></button>
    </div>
    <div class="head-center">
        <a href="#">工作台</a>
        <a href="#">空间</a>
        <a href="#">发现</a>
        <a href="#">帮助</a>
        <a href="#">反馈</a>
    </div>
    <div class="head-right">
      <img src="images/添加.png" style="width: 20px;height: 20px;margin-right: 20px;">
      <img src="images/时间 历史记录 计时 钟表 线性.png" style="width: 20px;height: 20px;margin-right: 20px;">
      <img src="images/闹铃.png" style="width: 20px;height: 20px;margin-right: 20px;">
      <img src="images/mi.png" style="width: 25px;height: 25px;border-radius: 15px;">
      <img src="images/下 拉.png" style="width: 9px;height: 9px;padding-bottom: 7px;">
    </div>
  
  </div>
<hr >

<!-- 中间 -->
   <div class="main">
    <div class="main1">
        <div class="left1">
            <img style="width: 100px;height: 100px;margin-left: 115px;margin-top: 50px;" src="images/老师logo.png" alt="">
            <p style="text-align: center;font-size: 130%;">chengbenchao</p>
            <p style="text-align: center;margin-top: 10px;font-size: 95%;color:#8c8c8c;">懦夫从未启程，弱者死于途中，而我</br>们在路上。</p>
            <div style="text-align: center;margin-top:15px;">
                <button>关注</button>
            </div>
            <div style="text-align: center;margin-top: 20px;">
            <table>
                <tr>
                    <td>关注了</td>
                    <td>关注者</td>
                </tr>
                <tr style="margin-top: 10px;">
                    <td style="font-weight: bold;">8</td>
                    <td style="font-weight: bold;">184</td>
                </tr>
            </table>
            <hr style="margin-top: 25px;border:0.5px solid#e8e8e8">
            <div style="margin-top: 20px;margin-left: -180px;font-size: 90%;color: #8c8c8c;"><img class="zj"  src="images/坐标.png" alt=""><span>武汉</span></div>
            <div style="margin-top: 10px;margin-left: -152px;font-size: 90%;color: #8c8c8c;"><img class="zj1"  src="images/公文包.png" alt=""><span style="margin-left: 43px;">web前端工程师</span></div>
            <hr style="margin-top: 25px;border:0.5px solid#e8e8e8">
            </div>
                <p style="color: #9a9a9b;margin-top: 20px;margin-left: 30px;">团队</p>
                <p style="color: #9a9a9b;text-align: center;margin-top: 20px;">尚未加入任何团队</p>

        </div>
        <div class="right">
            <table>
                <tr>
                    <td style="border-bottom: 2px solid #25b864;width: 80px;">知识库</td>
                    <td>关注了</td>
                    <td>关注者</td>
                </tr>
            </table>
            <hr style="margin-top: -2px;border: 0.5px solid#e8e8e8;">
            <div>
            <div style="margin-top: 10px;margin-left: 10px;">
                <input type="text" placeholder="搜索知识库">
                <img style="width: 15px;float: right;margin-right: 20px;margin-top: 3px;" src="images/下标.png" alt="">
                <p style="float: right;color: #595959;">类型：所有</p>
            </div>
            <hr style="margin-top: -2px;border: 0.5px solid#e8e8e8;margin-top: 10px;;">
        </div>
            <div class="s11">
                <img style="width: 23px;margin-top: 16px;margin-left: 27px;" src="images/书.png" alt="">
                <p class="s111">小程序</p>
                <p class="s112">10-25&nbsp;&nbsp;22:55</p>
            </div>
            <hr style="margin-top: -2px;border: 0.5px solid#e8e8e8;margin-top: 10px;;">
            <div class="s11">
                <img style="width: 23px;margin-top: 16px;margin-left: 27px;" src="images/书.png" alt="">
                <p class="s111">前端</p>
                <p class="s114">html-css-js-wechat学习笔记</p>
                <p class="s113">10-23&nbsp;15:09</p>
            </div>
            <hr style="margin-top: -2px;border: 0.5px solid#e8e8e8;margin-top: 10px;;">
        </div>
    </div>  
</div>



   <!-- 最后一部分 -->
   <div class="last">
      <table >
          <tr>
              <td colspan="6" class="last-xt">
                  <img src="images/语雀logo.png" width="60px" height="24px">
              </td>
          </tr>
          <tr>
              <td style="margin-right: 5px;color: rgb(140, 140, 140);">关于语雀</td>
              <td style="color: rgb(140, 140, 140);">使用帮助</td>
              <td style="color: rgb(140, 140, 140);">数据安全</td>
              <td style="color: rgb(140, 140, 140);">服务协议</td>
              <td style="color: rgb(140, 140, 140);">|</td>
              <td style="color: rgb(140, 140, 140);">Englisi</td>
          </tr>
      </table>

   </div>
   
   <!-- 问号 -->
   <div class="mark">
       <img src="images/问号.png" width="32px" height="32px">
   </div>
</div>

<!-- 跳转顶部 -->


<a id="back_top" href="script:;">   
  <span><img src="images/回到顶部.png" width="32px" height="32px"></span> 
</a>
</div>

<script>
$(function(){
	$(window).scroll(function(){  //只要窗口滚动,就触发下面代码 
		var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //获取滚动后的高度 
		if( scrollt >200 ){  //判断滚动后高度超过200px,就显示  
			$("#back_top").fadeIn(400); //淡出     
		}else{      
			$("#back_top").stop().fadeOut(400); //如果返回或者没有超过,就淡入.必须加上stop()停止之前动画,否则会出现闪动   
		}
	});
	$("#back_top").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部
			$("html,body").animate({scrollTop:"0px"},200);
	});
});
</script>
</body>
</html>